<template>
    <div class="meeting_detail">
      <div class="header">
         兴威华天酒店预订单
      </div>
      <tab>
        <tab-item selected active-class="active" @on-item-click="onItemClick">基础信息</tab-item>
        <tab-item @on-item-click="onItemClick" v-if="mOrederData.isMeeting ==1">会议信息</tab-item>
        <tab-item @on-item-click="onItemClick" v-if="mOrederData.isRoom ==1">住宿信息</tab-item>
      </tab>
      <div class="detail_box">
        <div v-if="index == 0">
          <ul class="plist">
            <li class="plist-li">
              
                <div class="l">订单编号</div>
                <div class="r">{{ mOrederData.orderNum }}</div>
            </li>
            <li class="plist-li">
              
                <div class="l">订单状态</div>
                <div class="r">
                    <span class="vertical-middle" v-if="mOrederData.state == 1">草稿</span>
                    <span class="vertical-middle" v-if="mOrederData.state == 2">审核中</span>
                    <span class="vertical-middle" v-if="mOrederData.state == 3">审核不通过</span>
                    <span class="vertical-middle" v-if="mOrederData.state == 4">进行中</span>
                    <span class="vertical-middle" v-if="mOrederData.state == 5">已完成</span>
                    <span class="vertical-middle" v-if="mOrederData.state == 6">已取消</span>               
                </div>
            </li>
            <li class="plist-li">
                <div class="l">下单时间</div>
                <div class="r">{{ format(mOrederData.createTime,'yyyy-MM-dd hh:mm' )}}</div>
            </li>
            <li class="plist-li">
                <div class="l">单位名称</div>
                <div class="r">{{ mOrederData.agreementUnit }}</div>
            </li>
            <li class="plist-li">
                <div class="l">会议主题</div>
                <div class="r">{{ mOrederData.theme }}</div>
            </li>
            <li class="plist-li">
                <div class="l">签单人</div>
                <div class="r">{{ mOrederData.signUser }}</div>
            </li>
            <li class="plist-li">
                <div class="l">联系方式</div>
                <div class="r">{{ mOrederData.phone }}</div>
            </li>
            <li class="plist-li">
                <div class="l">身份证</div>
                <div class="r">{{ mOrederData.idCard }}</div>
            </li>
            <li class="plist-li">
                <div class="l">营销员</div>
                <div class="r">{{ mOrederData.userName }}</div>
            </li>
            <li class="plist-li">
                <div class="l">付款方式</div>
                <div class="r">{{ mOrederData.paymentName }}</div>
            </li>
          </ul>
        </div>
        <div v-if="mOrederData.isMeeting == 1&&index == 1">
          <ul class="plist">
            <li class="plist-li">             
                <div class="l">会议室</div>
                <div class="r">{{ mOrederData.meetingName }}</div>
            </li>
            <li class="plist-li">              
                <div class="l">开始时间</div>
                <div class="r">{{ format(mOrederData.startTime,'yyyy-MM-dd hh:mm') }}</div>
            </li>
            <li class="plist-li">
                <div class="l">结束时间</div>
                <div class="r">{{ format(mOrederData.endTime,'yyyy-MM-dd hh:mm' )}}</div>
            </li>
            <li class="plist-li">
                <div class="l">参会人数</div>
                <div class="r">{{ mOrederData.joinNumber }}人</div>
            </li>
            <li class="plist-li">
                <div class="l">会场布置</div>
                <div class="r">{{ mOrederData.venueLayout }}</div>
            </li>
            <li class="plist-li">
                <div class="l">会议性质</div>
                <div class="r">{{ mOrederData.meetingNature }}</div>
            </li>
            <li class="plist-li">
                <div class="l">会场负责人</div>
                <div class="r">{{ mOrederData.meetingUserName }}<span v-if="mOrederData.meetingMobile">({{mOrederData.meetingMobile }})</span></div>
            </li>
            <li class="plist-li">
                <div class="l">举办方负责人</div>
                <div class="r">{{ mOrederData.holdName }}<span v-if="mOrederData.holdPhone">({{mOrederData.holdPhone }})</span></div>
            </li>
          </ul>
        </div>
        <div v-if="mOrederData.isRoom == 1&&index == 2">
          <div class="stay">
            <p class="head">
              <span>订房接待人</span><span>{{mOrederData.roomUserName }}({{mOrederData.roomMobile}})</span>             
            </p>
            <div class="list" v-for="(item,index) in mOrederData.marketingOrderList" :key="index">
                <div class="list_left">
                    <img class="left" :src="item.imgUrl+item.url.split(';')[0]" alt="" style="width:1.5rem;height:1.5rem;">
                </div>
                <div class="list_right">
                    <p class="roomName ">{{item.roomName}}</p>
                    <p class="time" style="margin-top:.18rem;">{{item.liveTime}}至{{item.leaveTime}}</p>
                    <p class="time">预定：{{item.bookingRoomsNum}}</p>
                </div>
            </div>
          </div>
        </div>
        <div class="footer">
            <x-button type="primary" @click.native="btn">分享二维码，参会嘉宾查看会议须知</x-button>  
        </div>       
      </div>    
    </div>
</template>
<script>
import { XHeader, XButton, Tab, TabItem, Group, Cell } from "vux";
import { getMeetingOrderData } from "@/service/meeting.js";
import { format } from "@/service/util.js";
export default {
  components: { XHeader, XButton, Tab, TabItem, Group, Cell },
  data() {
    return {
      index: 0,
      mOrederData: "",
      format: format,
      mOrderId: ""
    };
  },
  created() {
    this.mOrderId = this.$route.query.id;
    sessionStorage.setItem('id',this.mOrderId);
    this._getMeetingOrderData();
  },
  methods: {
    _getMeetingOrderData() {
      var data = {
        mOrderId: this.mOrderId
      };
      getMeetingOrderData(data).then(res => {
        this.mOrederData = res.data.mOrederData;
        console.log(this.mOrederData);
      });
    },
    //切换导航
    onItemClick(index) {
      this.index = index;
    },
    btn() {
      sessionStorage.setItem("mOrderId", this.mOrderId);
      //this.$router.push("/my/Meeting/MeetingCode_first");
      window.location.href = "/my/Meeting/MeetingCode_first";
    }
  }
};
</script>

<style lang="less">
.meeting_detail {
  .header {
    margin-bottom: 0.01rem;
  }
  .detail_box {
    .plist {
      padding: 0 0.25rem;
      background: rgba(255, 255, 255, 1);
    }
    .plist .plist-li {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      height: 0.9rem;
      line-height: 0.9rem;
      border-bottom: 1px solid #ddd;
      color: #262626;
    }
    .plist .plist-li .l {
      width: 2rem;
    }
    .stay {
      .head {
        width: 7.5rem;
        height: 0.9rem;
        background: rgba(255, 255, 255, 1);
        padding: 0.31rem 0.25rem;
        margin-bottom: 0.1rem;
        span {
          margin-right: 0.39rem;
          width: 1.48rem;
          height: 0.28rem;
          font-size: 0.3rem;
          font-family: PingFang-SC-Medium;
          font-weight: 500;
          color: rgba(38, 38, 38, 1);
          line-height: 0.28rem;
        }
      }
      .list {
        width: 7.5rem;
        height: 1.9rem;
        background: rgba(255, 255, 255, 1);
        padding: 0.2rem 0.26rem;
        margin-bottom: 0.1rem;
        .list_left {
          width: 1.5rem;
          height: 1.5rem;
          margin-right: 0.2rem;
          float: left;
        }
        .list_right {
          width: 3.5rem;
          height: 1.5rem;
          float: left;
          .roomName {
            height: 0.29rem;
            line-height: 0.29rem;
            margin-top: 0.2rem;
            font-size: 0.3rem;
            font-family: PingFang-SC-Medium;
            font-weight: 500;
            color: rgba(44, 44, 44, 1);
          }
          .time {
            margin-top: 0.15rem;
            height: 0.23rem;
            line-height: 0.23rem;
            font-size: 0.24rem;
            font-family: PingFang-SC-Medium;
            font-weight: 500;
            color: rgba(161, 161, 161, 1);
          }
        }
      }
    }
  }
  .content {
    background: #fff;
    padding: 0.4rem;
    li {
      height: 0.8rem;
      line-height: 0.8rem;
      .label {
        margin-right: 0.3rem;
      }
    }
  }
  .vux-tab-item {
    font-size: 0.3rem !important;
  }
  .vux-tab-item.vux-tab-selected {
    font-weight: 500;
    color: rgba(135, 42, 145, 1) !important;
    border-bottom: 3px solid rgba(135, 42, 145, 1) !important;
  }
  .footer {
    position: fixed;
    height: 1.19rem;
    line-height: 1.19rem;
    bottom: 0rem;
    width: 100%;
    background: #fff;
    .weui-btn {
      width: 7rem;
      height: 0.8rem;
      margin: 0.2rem 0.25rem;
      background: #872a91 !important;
      border-radius: 0.08rem !important;
      font-size: 0.3rem;
    }
  }
}
</style>